<template>
  <div>
    <el-row class="mt20">
      <!-- <el-col :span="3">请选择店铺类型</el-col> -->
      <el-col :span="6" :offset="1">
        请选择店铺类型:
        <el-select
          v-model="storetype"
          @change="selectStoreType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in storetypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option> </el-select
      ></el-col>
    </el-row>

    <div class="app-container">
      <el-table border :data="tableData" style="width: 100%" :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
        <el-table-column prop="store_type_desc" label="店铺类型">
          <!-- <template slot-scope="scope">
            <span>{{ returnType(scope.row.store_type, "storetypeList") }}</span>
          </template> -->
        </el-table-column>

        <el-table-column prop="store_scale" label="店铺规模">
          <template slot-scope="scope">
            <span>{{
              returnType(scope.row.store_scale, "store_scaleList")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="store_name" label="店铺名称" />
        <el-table-column prop="store_topimg" label="店铺门头照">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.store_topimg"
              fit="contain"
               :preview-src-list="[scope.row.store_topimg]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="" label="店铺证件照">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.store_certificates"
              fit="contain"
               :preview-src-list="[scope.row.store_certificates]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="store_environmental" label="店铺环境照片">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.store_environmental"
              fit="contain"
               :preview-src-list="[scope.row.store_environmental]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="deposit_balance" label="店铺保证金余额" />
        <el-table-column prop="store_balance" label="店铺余额" />
        <el-table-column prop="frozen_balance" label="冻结金额" />
        <el-table-column prop="phone" label="店铺联系电话" />
        <!-- <el-table-column prop="mainbrand" label="主营品牌" /> -->
        <el-table-column prop="address" label="公司地址" />
        <el-table-column prop="companyname" label="公司名" />
        <!-- <el-table-column prop="bussinesstime" label="营业时间" /> -->
        <!--isgover 0、不是自营 1、自营 -->
        <el-table-column prop="isgover" label="是否自营" >
          <template slot-scope="scope">{{scope.row.isgover===0?'否':'是'}}</template>
        </el-table-column>
         <el-table-column prop="store_status" label="审核状态">
          <template slot-scope="scope">{{
              returnType(scope.row.store_status, "store_statusList")
            }} </template>
        </el-table-column>
        <!-- <el-table-column prop="remark" label="备注" /> -->
        <!-- <el-table-column prop="score" label="评分" /> -->
        <!--status （0、正常 1、删除） -->
        <!-- <el-table-column prop="status" label="状态" >
          <template slot-scope="scope">{{scope.row.status===0?'正常':'删除'}}</template>
        </el-table-column> -->
        <el-table-column prop="addtime" label="添加时间" />
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageIndex: 1,
      pageSize: 10,
      storetype: "9",
      total: 0,
      storetypeList: [
        // {
        //   id: "0",
        //   name: "美护保精品供应商",
        // },
        // {
        //   id: "1",
        //   name: "7迈车直营养护",
        // },
        // {
        //   id: "2",
        //   name: "车源商",
        // },
        // {
        //   id: "3",
        //   name: "汽贸店",
        // },
        // {
        //   id: "4",
        //   name: "4s店",
        // },
        // {
        //   id: "5",
        //   name: "7迈直营",
        // },
        // {
        //   id: "6",
        //   name: "7迈直营美护保",
        // },
        // {
        //   id: "7",
        //   name: "主机厂",
        // },
        // {
        //   id: "8",
        //   name: "养护门店",
        // },
        {
          id: "9",
          name: "自助洗车普通加盟商",
        },
        {
          id: "10",
          name: "自助洗车普通代理商",
        },
        {
          id: "11",
          name: "自助洗车合作加盟商",
        },
      ],
      store_scaleList: [
        { id: 0, name: "旗舰店" },
        { id: 1, name: "体验店" },
        { id: 2, name: "中心店" },
      ],
        store_statusList: [
        { id: 0, name: "审核中" },
        { id: 1, name: "审核通过" },
        { id: 2, name: "审核失败" },
      ],
    };
  },
  mounted() {
    this.StoreGetPageList();
  },
  methods: {
    StoreGetPageList() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        storetype: this.storetype,
      };
      this.$api.storeManage.StoreGetPageList(data).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    returnType(id, type) {
      let name = "";
      this[type].forEach((it) => {
        if (it.id == id) {
          name = it.name;
        }
      });
      return name;
    },
    handleSizeChange(e) {
      this.pageSize = e;
    },
    handleCurrentChange(e) {
      this.pageIndex = e;
    },
    selectStoreType(e) {
      // console.log(e)
      this.storetype = e;
      this.StoreGetPageList();
    },
  },
};
</script>
<style scoped>
.block {
  text-align: right;
}
.mt20 {
  margin-top: 20px;
}
</style>
